import React, { useContext, useState } from "react";
import { Button, Drawer, Collapse, CollapseProps } from "antd";

import ProAutoScrollbars from "vendor/components/pro-autoScrollbars";
import { MapCtx } from "@/components/app/earth3dVis";

import { DataLayer } from "./DataLayer";

const ShowCase: React.FC = () => {
  const [open, setOpen] = useState(false);
  const { items } = useShowCase();

  return <div className="absolute" style={{ left: 20, top: 5 }}>
    <Button type="primary" onClick={() => setOpen(true)} style={{ marginBottom: 5 }}>
      展开DEMO
    </Button>

    <Drawer
      title={"场景演示"}
      open={open}
      onClose={() => setOpen(false)}
      placement="left"
      width={"40%"}
      styles={{
        body: { padding: 5 }
      }}
      mask={false}
    >
      <ProAutoScrollbars>
        <Collapse
          items={items}
          defaultActiveKey={items.map(({ key }) => key)}
          size={"small"}
        />
      </ProAutoScrollbars>
    </Drawer>
  </div>
}

export default ShowCase;

const useShowCase = () => {
  const { cesiumUtil } = useContext(MapCtx).gisMapStore;
  const { CE } = cesiumUtil;
  const items: CollapseProps['items'] = [
    {
      key: 'dataLayer',
      label: '数据图层',
      children: <DataLayer cesiumUtil={cesiumUtil} />,
    },
  ];

  return { items }
}
